<template>
  <div class="banner" v-if="banner">
    <NuxtLink :to="$i18n.path('m/download')" title="bottom banner">
      <img v-lazy="banner && banner.originalImage" alt="bottom banner" />
    </NuxtLink>
  </div>
</template>

<script>
export default {
  props: {
    banner: {
      type: Object,
      default: {}
    }
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 150px;
  padding-top: 16px;

  img {
    display: block;
    width: 694px;
    height: 130px;
    margin: 0 auto 0;
    border-radius: 8px;
    border: 1px solid rgba(12, 12, 28, 0.1);
  }
}

img[lazy='loading'] {
  width: 694px;
  height: 130px;
  object-fit: cover;
}
</style>
